<template>
	<div class="carfooter">
		<ul class="fl">
			<li @click="$router.push('/')">
				<span class="iconfont icon-shouye"></span><br>
				<span>主页</span>
			</li>
			<li @click="$router.push('/shopCar')">
				<span class="iconfont icon-gouwuche"></span><br>
				<span>购物车</span>
				<span class="numm" v-if="getCarlistAdnum > 0">{{ getCarlistAdnum }}</span>
			</li>
		</ul>
		<div class="addcar fr" @click="addShop">
			<span>加入购物车</span>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		name:"carfooter",
		computed:{
			shopnum(){
				return this.$store.state.shopnum
			}
		},
		props:{
			main:{
				type:Object,
			}
		},
		computed:{
			getCarlistAdnum(){//返回购物车总件数
				return this.$store.getters.getCarlistAdnum
			}
		},
		methods:{
			addShop(){
				
				//console.log(this.main);
				this.$store.commit('addShopCar' , this.main);
			}

		},
		mounted(){
			//console.log(this.main)
		}
	}
</script>

<style>
	.carfooter{
		position: fixed;
		bottom: 0;
		width: 100%;
		max-width: 640px;
		background-color: #fff;
		border-top: 1px solid #ccc;
	}
	.carfooter ul{
		width: 40%;
		text-align: center;
	}
	.carfooter ul li{
		position: relative;
		display: inline-block;
		text-align: center;
		padding: 5px 0;
		color: #777;
		width: 48%;
		box-sizing: border-box;
	}
	.carfooter ul li span:nth-child(1){
		font-size:22px;
	}
	.carfooter ul li span:nth-child(3){
		font-size:14px;
	}
	.addcar{
		line-height: 56px;
		width: 60%;
		text-align: center;
		background-color: #FF6700;
		color: #fff;
	}
	.numm{
		position: absolute;
		right: 0;
		top: 5px;
		border-radius: 50%;
		height: 17px;
		line-height: 17px;
		width: 17px;
		font-size: 12px !important;
		color: #fff !important;
		background-color: #ED3B3B;
	}
	
	.addprice{
		width: 40%;
		line-height: 56px;
		text-align: center;
	}
</style>